// src/directives/table-drag-scroll.js
export default {
  inserted(el, binding, vnode) {
    const table = vnode.componentInstance;
    const tableBody = el.querySelector('.vxe-table--body-wrapper');
    const tableHeader = el.querySelector('.vxe-table--header-wrapper');
    
    if (!tableBody || !tableHeader) return;
    
    let isDragging = false;
    let startX = 0;
    let scrollLeft = 0;
    
    // 隐藏原生滚动条
    tableBody.style.overflowX = 'auto';
    tableBody.style.scrollbarWidth = 'none';
    tableBody.style.msOverflowStyle = 'none';
    
    // Webkit 浏览器隐藏滚动条
    const style = document.createElement('style');
    style.innerHTML = `
      ${el.querySelector('.vxe-table--body-wrapper').selector}::-webkit-scrollbar {
        display: none;
      }
    `;
    document.head.appendChild(style);
    
    // 鼠标按下事件
    const handleMouseDown = (e) => {
      if (e.button !== 0) return; // 只响应左键
      
      isDragging = true;
      startX = e.pageX;
      scrollLeft = tableBody.scrollLeft;
      
      // 添加拖动样式
      tableBody.style.cursor = 'grabbing';
      tableBody.style.userSelect = 'none';
    };
    
    // 鼠标释放事件
    const handleMouseUp = () => {
      if (!isDragging) return;
      
      isDragging = false;
      // 恢复样式
      tableBody.style.cursor = 'grab';
      tableBody.style.userSelect = '';
    };
    
    // 鼠标移动事件
    const handleMouseMove = (e) => {
      if (!isDragging) return;
      
      e.preventDefault();
      const x = e.pageX;
      const walk = (x - startX) * (binding.value?.speed || 1.5); // 可配置滚动速度
      
      // 使用 requestAnimationFrame 优化滚动性能
      requestAnimationFrame(() => {
        tableBody.scrollLeft = scrollLeft - walk;
        tableHeader.scrollLeft = scrollLeft - walk;
      });
    };
    
    // 添加事件监听
    tableBody.addEventListener('mousedown', handleMouseDown);
    document.addEventListener('mouseup', handleMouseUp);
    document.addEventListener('mouseleave', handleMouseUp);
    document.addEventListener('mousemove', handleMouseMove);
    
    // 触摸事件支持
    const handleTouchStart = (e) => {
      isDragging = true;
      startX = e.touches[0].pageX;
      scrollLeft = tableBody.scrollLeft;
    };
    
    const handleTouchMove = (e) => {
      if (!isDragging) return;
      const x = e.touches[0].pageX;
      const walk = (x - startX) * (binding.value?.speed || 1.5);
      
      requestAnimationFrame(() => {
        tableBody.scrollLeft = scrollLeft - walk;
        tableHeader.scrollLeft = scrollLeft - walk;
      });
    };
    
    const handleTouchEnd = () => {
      isDragging = false;
    };
    
    // 添加触摸事件监听
    tableBody.addEventListener('touchstart', handleTouchStart);
    tableBody.addEventListener('touchmove', handleTouchMove);
    tableBody.addEventListener('touchend', handleTouchEnd);
    
    // 清理函数
    el._cleanup = () => {
      tableBody.removeEventListener('mousedown', handleMouseDown);
      document.removeEventListener('mouseup', handleMouseUp);
      document.removeEventListener('mouseleave', handleMouseUp);
      document.removeEventListener('mousemove', handleMouseMove);
      
      tableBody.removeEventListener('touchstart', handleTouchStart);
      tableBody.removeEventListener('touchmove', handleTouchMove);
      tableBody.removeEventListener('touchend', handleTouchEnd);
      
      document.head.removeChild(style);
    };
  },
  
  unbind(el) {
    if (el._cleanup) {
      el._cleanup();
    }
  }
};
